<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mosaic</title>
		<style>
#root {margin:auto;max-width:600px;width:100%;}
.slice {animation:enter 1s;animation-fill-mode:forwards;background-image:url(flowers.jpg);height:60px;float:left;opacity:0;width:60px;}
.slice:nth-child(10n) {clear:right;}
.exit {animation:exit 1s;}

@keyframes enter {
	from {opacity:0;transform:rotate(-90deg) scale(0);}
	to {opacity:1;transform:rotate(0) scale(1);}
}
@keyframes exit {
	from {opacity:1;transform:rotate(0) scale(1);}
	to {opacity:0;transform:rotate(90deg) scale(0);}
}
		</style>
	</head>
	<body>
		<div id="root"></div>
		<script src="../../mithril.js"></script>
		<script>
var root = document.getElementById("root")

var empty = []
var full = []
for (var i = 0; i < 100; i++) full.push(i)

var cells

function view() {
	return m(".container", cells.map(function(i) {
		return m(".slice", {
			style: {backgroundPosition: (i % 10 * 11) + "% " + (Math.floor(i / 10) * 11) + "%"},
			onbeforeremove: exit
		})
	}))
}

function exit(vnode) {
	vnode.dom.classList.add("exit")
	return new Promise(function(resolve) {
		setTimeout(resolve, 1000)
	})
}

function run() {
	cells = cells === full ? empty : full

	m.render(root, [view()])

	setTimeout(run, 2000)
}

run()
		</script>
	</body>
</html>
